<template>
  <div class="box">
    <h3>产品管理</h3>
    <div class="top_box">
      产品名称：<el-input
        v-model="name"
        style="width: 160px; margin-right: 20px"
        placeholder="请输入"
      />
      产品型号：
      <el-select v-model="spec" placeholder="请选择" style="width: 160px">
        <el-option
          v-for="item in specOptions"
          :key="item.id"
          :label="item.dictName"
          :value="item.dictName"
        />
      </el-select>
      产品状态：
      <el-select v-model="status" placeholder="请选择" style="width: 160px">
        <el-option label="全部" :value="0" />
        <el-option label="开启" :value="1" />
        <el-option label="关闭" :value="2" />
      </el-select>
      <el-button class="query" @click="query">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <span class="add">
        <el-button type="primary" @click="save()">添加</el-button>
      </span>
    </div>

    <el-table :data="tableDate" border style="width: 100%">
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="code" label="产品编号" align="center" />
      <el-table-column
        prop="categoryName"
        label="产品分类"
        align="center"
        width="160"
      />
      <el-table-column prop="spec" label="型号" align="center" />
      <el-table-column
        prop="productNumber"
        label="产品图号"
        align="center"
        width="120"
      />
      <el-table-column prop="inventory" label="库存" align="center" />
      <el-table-column prop="createUser" label="创建人" align="center" />
      <el-table-column prop="status" label="状态" align="center" width="100">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            class="ml-2"
            :active-value="1"
            :inactive-value="2"
            @change="chg(row.id, row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="160"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" circle @click="save(row)" />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination
        v-model="pageSize"
        :default-page-size="8"
        :page-sizes="[8, 10, 20, 30]"
        background
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import {
  queryList,
  deleteProduct,
  updateStatus
} from "@/api/product/product.js";
import { queryByType } from "@/api/system/dict.js";
import { useRouter } from "vue-router";
const specOptions = ref([]);

const router = useRouter();
//定义分页属性
const page = ref(1);
const pageSize = ref(8);
const total = ref(0);
//定义查询条件
const name = ref(null);
const spec = ref(null);
const status = ref(null);

const tableDate = ref([]);
//分页触发的函数
//分页大小改变触发
function handleSizeChange(ps) {
  pageSize.value = ps;
  init();
}
//页数改变触发
function handleCurrentChange(pg) {
  page.value = pg;
  init();
}
//初始化，页面加载时获取数据
async function init() {
  let tmp = {
    page: page.value,
    pageSize: pageSize.value,
    name: name.value,
    spec: spec.value,
    status: status.value
  };
  let res = await queryList(tmp);
  if (res.code == 200) {
    tableDate.value = res.data.list;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

async function chg(id, status) {
  let res = await updateStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init();
  }
}

//新增和修改
function save(data) {
  if (data) {
    router.push({ name: "addProduct", query: { id: data.id } });
  } else {
    router.push({ name: "addProduct" });
  }
}

//删除
function del(id) {
  ElMessageBox.confirm("你确定要删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      todel(id);
    })
    .catch(() => {});
}
async function todel(id) {
  let res = await deleteProduct(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    init();
  }
}
//查询产品型号
async function getSpec() {
  let res = await queryByType("spec");
  if (res.code == 200) {
    specOptions.value = res.data;
  }
}
//查询
async function query() {
  init();
}
//重置
function reset() {
  name.value = "";
  spec.value = null;
  status.value = null;
  init();
}

onBeforeMount(() => {
  getSpec();
  init();
});
</script>
<style scoped>
.top_box {
  padding-top: 20px;
  width: 100%;
  height: 70px;
  background: #fff;
  padding-left: 50px;
  margin-bottom: 20px;
}
h3 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 20px;
}
.add {
  float: right;
  margin-right: 20px;
}
.query {
  margin-left: 10px;
}
</style>
